<!-- 页面外套 -->
<div class="page-wrapper" id="material_lists_admin">
    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped">
        <!-- 工具条组 -->
        <div class="tool-group">
            <form class="tool-search">
                <input type="hidden" name='page'>
                <input type="hidden" name='recPerPage'>
                <label>
                    <span>项目状态：</span>
                    <select class="form-control" name="state">
                        <option value="0">全部</option>
                        <option value="1">正跟踪</option>
                        <option value="2">已提交-商务经未审批</option>
                        <option value="3">已提交-设计经理未分单</option>
                        <option value="4">在谈</option>
                        <option value="5">已签</option>
                        <option value="6">未签申请中</option>
                        <option value="7">未签已归库</option>
                        <option value="8">不准申请中</option>
                        <option value="9">不准已归库</option>
                        <option value="10">已放弃</option>
                    </select>
                </label>
                <label><button type="button" class="btn btn-primary tool_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
                <div class="clearfix"></div>
            </form>
            <div class="tool-deal">
                <label><button class="btn btn-primary tool_add_btn"> <i class="icon icon-plus"></i> 添加材料</button></label>
                <label><button class="btn btn-primary tool_del_btn"> <i class="icon icon-trash"></i> 批量删除</button></label>
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
</div>
<!-- page-wrapper -->

<!-- 添加盒子/材料 -->
<!-- <div class="modal modal-for-page fade" aria-hidden="false" id="material_add_box">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">添加材料</h4>
            </div>
            <div class="modal-body modal-scroll" id="material_add_view"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary form_add_submit">提交</button>
            </div>                
        </div>
    </div>
</div> -->
<!-- 详情外套 -->
<!-- <div class="detail-wrapper mode-show"> -->
    <!-- 详情弹框 -->
    <div class="modal modal-for-page fade" aria-hidden="false" id="material_detail_box">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title" id="modal-title"></h4>
                </div>
                <div class="modal-body modal-scroll">
                    <!-- 数据表单 -->
                    <div id="material_detail_view"></div>
                    <!-- 切换表格 -->
                    <div id="material_detail_table" class="hide">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-tab="" href=".detail_tab1" id="1">地区价格品牌</a></li>
                            <li><a data-tab="" href=".detail_tab2" id="2">所属工艺</a></li>
                            <li><a data-tab="" href=".detail_tab3" id="3">历史价格</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active detail_tab1">
                                <div class="tool-group no-padding">
                                    <div class="tool-deal">
                                        <label><button class="btn btn-primary area_price_add_btn"> <i class="icon icon-plus"></i> 添加</button></label>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <form class="tool-search">
                                    <input type="hidden" name='page'>
                                    <input type="hidden" name='recPerPage'>
                                    <input type="hidden" name="cid" value="null">
                                </form>
                                <div class="datagrid datagrid-striped">
                                    <div class="datagrid-container"></div>
                                    <ul class="pager btn-mini" data-elements="first_icon,prev_icon,next_icon,last_icon,size_menu,goto,page_of_total_text" data-menu-direction="dropup"></ul>
                                </div>
                            </div>
                            <div class="tab-pane detail_tab2">
                                <form class="tool-search">
                                    <input type="hidden" name='page'>
                                    <input type="hidden" name='recPerPage'>
                                    <input type="hidden" name="cid" value="null">
                                </form>
                                <div class="datagrid datagrid-striped">
                                    <div class="datagrid-container"></div>
                                    <ul class="pager btn-mini" data-elements="first_icon,prev_icon,next_icon,last_icon,size_menu,goto,page_of_total_text" data-menu-direction="dropup"></ul>
                                </div>
                            </div>
                            <div class="tab-pane detail_tab3">
                                <form class="tool-search">
                                    <input type="hidden" name='page'>
                                    <input type="hidden" name='recPerPage'>
                                    <input type="hidden" name="cid" value="null">
                                </form>
                                <div class="datagrid datagrid-striped">
                                    <div class="datagrid-container"></div>
                                    <ul class="pager btn-mini" data-elements="first_icon,prev_icon,next_icon,last_icon,size_menu,goto,page_of_total_text" data-menu-direction="dropup"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary form_detail_submit">提交</button>
                </div>                
            </div>
        </div>
    </div>
<!-- </div> -->
<!-- 批量删除 -->
<div class="modal modal-for-page fade" id="tool_delete_box" aria-hidden="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">批量删除</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                     <p>您确定要批量删除选中的记录吗？</p>
                     <!-- <form><input type="hidden" name="id"></form> -->
                     <form><input type="hidden" name="ids"></form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary tool_delete_submit">确定</button>
            </div>                
        </div>
    </div>
</div>
<!-- 单条删除 -->
<div class="modal modal-for-page fade" id="line_delete_box" aria-hidden="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">信息删除</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                     <p>您确定要删除吗？</p>
                     <form><input type="hidden" name="id"></form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary line_delete_submit">确定</button>
            </div>                
        </div>
    </div>
</div>


 
    <script id="material_detail_template" type="text/html">
        <form class="container form-horizontal">
            <input type="hidden" name="cid">
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="col-sm-3">材料分类：</label>
                    <div class="col-sm-6">
                        <select class="form-control" name="category">
                            <option value="0">全部</option>
                            <option value="1">正跟踪</option>
                            <option value="2">已提交-商务经未审批</option>
                            <option value="3">已提交-设计经理未分单</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3">名称：</label>
                    <div class="col-sm-8"><input type="text" name="name" class="form-control" value="{{ d.salesman || ''}}"/></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3">编号：</label>
                    <div class="col-sm-8"><input type="text" name="numb" class="form-control" value="{{ d.number || '' }}"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3">单位：</label>
                    <div class="col-sm-6">
                        <select class="form-control col-sm-6" name="unit">
                            <!-- <option value="0">全部</option> -->
                            <option value="1">米(m)</option>
                            <option value="2">厘米(cm)</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3">规格：</label>
                    <div class="col-sm-8"><input class="form-control" name="specs" value="{{ d.decotodoname || '' }}"></div>
                </div>
            </div>
            <div class="col-sm-4">
                <!-- 单图上传 -->
                    <div class="card zui_upload_img" id="material_add_uploader" path="">
                        <span class="media-wrapper"><img src=""></span>
                        <div class="uploader-message text-center"><div class="content"></div></div>
                        <div class="uploader-files file-list hidden"></div>
                        <span class="card-heading">材料图片</span>
                        <span class="card-actions">
                            <a class="btn btn-danger  btn-mini uploader-btn-delete">清空</a>
                            <a class="btn btn-primary btn-mini uploader-btn-browse">上传</a>
                        </span> 
                    </div>
                <!-- zui_upload_img -->
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2">型号：</label>
                    <div class="col-sm-8"><input class="form-control" name="model" value="{{ d.decoarea || '' }}"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2">产地：</label>
                    <div class="col-sm-8"><input class="form-control" name="product" value="{{ d.addr || '' }}"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2">产品介绍：</label>
                    <div class="col-sm-8"><textarea class="form-control" name="desc" >{{ d.text || '' }}</textarea></div>
                </div>
            </div>
        </form>
    </script>
    <!-- 添加/修改地区价格 -->
    <div class="modal modal-for-page fade" id="area_price_form_box" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">添加地区价格品牌</h4>
                </div>
                <div class="modal-body" id="area_price_view"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="area_price_form_submit">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script id="area_price_template" type="text/html">
        <form class="form-horizontal">
            <input type="hidden" name="cid">
            <div class="form-group require">
                <label class="col-sm-2">地区：</label>
                <div class="col-sm-10">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="1"> 北京
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="2"> 上海
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="3"> 石家庄
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="4"> 成都
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="5"> 保定
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="6"> 沧州
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="7"> 唐山
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="8"> 邢台
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="9"> 张家口
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="area[]" value="10"> 承德
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="material_brand">品牌：</label>
                <div class="col-sm-6"><input type="text" name="material_brand" class="form-control" id="material_"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="material_cost">材料成本：</label>
                <div class="col-sm-6"><input type="text" name="material_cost" class="form-control" id="material_cost"></div>
            </div>
            <div class="form-group">
                <label class="col-sm-2" for="material_offer">材料报价：</label>
                <div class="col-sm-6"><input type="text" name="material_offer" class="form-control" id="material_offer"></div>
            </div>
        </form>
    </script>
<script src="./js/gotpl.js"></script>
<script>
$(function() {
    //变量声明-----------------------------------------------------------------------------------------------
    var material_lists_admin = $("#material_lists_admin"), //页面ID
        material_add_box       = $("#material_add_box"),
        material_add_uploader       = $("#material_add_uploader");
    var material_lists_admin_api = {
        datagrid : API.test_datagrid, // 数据表格
        tool_delete_api : API.test_response, // 工具条-删除
        form_add_api : API.test_response, // 添加提交
        detail_api : LOCAL + "Test/Template/customer.json", // 详情查看
        tab1 : API.test_datagrid, // 切换表格1
        tab2 : API.test_datagrid, // 切换表格2
        tab3 : API.test_datagrid, // 切换表格3
    }

    //数据表格-----------------------------------------------------------------------------------------------
    //数据源
    var material_lists_admin_dataSource = {
        cols   : [
            {name:"username",label:"编号",width:100,html:true,
                valueOperator : {
                    getter : function(dataValue,cell){
                        return `<a class="line_detail_btn" dataId="${cell.config.data.id}">${dataValue}</a>`;
                    }
                }
            },
            {name:"text8",label:"材料分类",width:120},
            {name:"name",label:"名称",width:100 },
            {name:"name",label:"品牌",width:80 },
            {name:"name",label:"规格",width:80 },
            {name:"name",label:"型号",width:80 },
            {name:"tex10",label:"单位",width:60},
            {name:"text2",label:"地区",width:180 },
            {name:"text2",label:"成本价",width:80 },
            {name:"tex10",label:"报价",width:80},
            {name:"",label:"操作",width:140,html:true,
                valueOperator : {
                    getter : function(dataValue,cell){
                        return `
                        <a class="btn btn-primary btn-sm line_edit_btn" dataId="${cell.config.data.id}"}"><i class="icon-edit"></i> 修改</a>
                        <a class="btn btn-danger btn-sm line_delete_btn" dataId="${cell.config.data.id}" data-deltype="list"><i class="icon-trash"></i> 删除</a>
                        `;
                    }
                }
            }
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : material_lists_admin, 
                url      : material_lists_admin_api.datagrid
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : material_lists_admin,
                data     : data
            });
        }
    };
    //实例化
    material_lists_admin.find('.datagrid').datagrid(
        zui_datagrid_option({
            datagrid   : material_lists_admin.find('.datagrid'),
            dataSource : material_lists_admin_dataSource,
            checkable  : true
        })
    );
    var material_lists_admin_datagrid_obj =  material_lists_admin.find('.datagrid').data("zui.datagrid");
    //搜索
    material_lists_admin.find('.tool_search_btn').click(function(){ 
        zui_datagrid_render({
            datagrid_obj : material_lists_admin_datagrid_obj,
            dataSource   : material_lists_admin_dataSource
        }); 
    });
    //上传创建-----------------------------------------------------------------------------------------------
    zui_upload_img({upid:"material_add_uploader"});
    //添加关闭
    material_add_box.on("hide.zui.modal",function(){
        //上传重置
        zui_upload_reset([
            material_add_uploader
        ]);
    });
    //操作按钮-------------------------------------------------------------------------------------------
    //变量声明 & 实例化
    var material_lists_add_box = $('#material_add_box'),
        material_add_view = $('#material_add_view'),
        // material_lists_admin_detail_btn = material_lists_admin.find('.line_edit_btn'),
        // material_lists_admin_delete_btn = material_lists_admin.find('.line_delete_btn'),
        material_tool_delete_box = $('#tool_delete_box'),
        material_line_delete_box = $('#line_delete_box'),
        material_detail_tpl = material_detail_template.innerHTML,
        material_detail_box = $("#material_detail_box"),
        material_detail_view = $('#material_detail_view');
    let modalTitle = material_detail_box.find('#modal-title');
    //tool-添加材料
    material_lists_admin.on("click", '.tool_add_btn', function() {
        common_form_reset();
        $('#material_detail_table').hide();
        modalTitle.text('添加材料');
        material_detail_box.modal('show');
        gotpl(material_detail_tpl).render([],function(html){
            material_detail_view.html(html)
        })
    });
    //添加提交
    material_detail_box.on("click", '.form_detail_submit', function() {
        // material_lists_admin
        um_data_submit({
            url: material_lists_admin_api.form_add_api,
            form: material_add_view.find('form'),
            datagridDom:material_lists_admin.find('.datagrid'),
            dataSource: material_lists_admin_dataSource
        });
    });
    
    //详情部分---------------------------------------------------------------------------
    //变量声明
    var dataSourceTabObj = {
        'tab1': {
            cols   : [
                {name:"name",    label:"地区",      width:100 },
                {name:"tex10",   label:"品牌",    width:100},
                {name:"username",label:"报价",    width:80},
                {name:"username",label:"成本",    width:80},
                {name:"",label:"操作",width:140,html:true,
                    valueOperator : {
                        getter : function(dataValue,cell){
                            return `
                            <a class="btn btn-primary btn-sm area_price_edit_btn" dataId="${cell.config.data.id}" itemNumb="${cell.config.data.username}" providerPre="${cell.config.data.name}"><i class="icon-edit"></i> 修改</a>
                            <a class="btn btn-danger btn-sm area_price_delete_btn" dataId="${cell.config.data.id}"><i class="icon-trash"></i> 删除</a>
                            `;
                        }
                    }
                }
            ],
            remote : function(){
                return zui_datagrid_remote({
                    page_dom : material_detail_box.find('.detail_tab1'), 
                    url      : material_lists_admin_api.tab1
                });
            },
            remoteConverter : function(data){ 
                return zui_datagrid_filter({
                    page_dom : material_detail_box.find('.detail_tab1'),
                    data     : data
                });
            }
        },
        'tab2':{
            cols   : [
                {name:"username",label:"回访人",      width:80 },
                {name:"datetime",label:"回访时间",    width:140},
                {name:"datetime",label:"下次回访时间",width:140},
                {name:"text5",   label:"负责人情况",  width:200},
                {name:"text2",   label:"对手进展",    width:80 },
                {name:"text2",   label:"跟进情况",    width:80 },
                {name:"state",   label:"现阶段困难",  width:180},
                {name:"text2",   label:"外协情况",    width:80 },
                {name:"state",   label:"经理批复",    width:180}
            ],
            remote : function(){
                return zui_datagrid_remote({
                    page_dom : material_detail_box.find('.detail_tab2'), 
                    url      : material_lists_admin_api.tab2
                });
            },
            remoteConverter : function(data){ 
                return zui_datagrid_filter({
                    page_dom : material_detail_box.find('.detail_tab2'),
                    data     : data
                });
            }
        },
        'tab3':{
            cols   : [
                {name:"name",    label:"操作人",  width:80 },
                {name:"datetime",label:"操作时间",width:140},
                {name:"tex10",   label:"过程说明",width:200}
            ],
            remote : function(){
                return zui_datagrid_remote({
                    page_dom : material_detail_box.find('.detail_tab3'), 
                    url      : material_lists_admin_api.tab3
                });
            },
            remoteConverter : function(data){ 
                return zui_datagrid_filter({
                    page_dom : material_detail_box.find('.detail_tab3'),
                    data     : data
                });
            }
        }
    };

    //详情弹框
    material_lists_admin.on("click", '.line_detail_btn,.line_edit_btn', function() {
        common_form_reset();
        var dataId = $(this).attr('dataId');
        modalTitle.text('材料详情/修改');
        $('#material_detail_table').show();
        material_detail_box.find('[name="cid"]').val(dataId); // 详情ID赋值(多个)
        //远程请求
        $.ajax({
            url     : material_lists_admin_api.detail_api,
            type    : "GET",
            dataType: "json",
            data    : { id: dataId },
            success : function(data){
                if( data.status>0 ){
                    var data = data.data;
                    //基础表格
                    gotpl(material_detail_tpl).render(data, function(html){
                        material_detail_view.html(html);
                        material_detail_box.modal('show'); // 弹框显示
                    });
                } else {
                    um_tip(data.message,"1500","text-danger");
                }
            }
        });
    });
    //切换表格
    var detailTabsArr = material_detail_box.find('.tab-content .datagrid'),
        area_price_list_box = material_detail_box.find('.detail_tab1 .datagrid');
    $.each(detailTabsArr,function(index,item){
       $(this).datagrid(
            zui_datagrid_option({
                height     : 400,
                datagrid   : $(this),
                dataSource : dataSourceTabObj['tab'+(index+1)]
            })
        );
    });
    var area_price_form_box = $('#area_price_form_box'),
        area_price_tpl = area_price_template.innerHTML,
        area_price_view = $('#area_price_view');
    //添加-地区价格品牌
    material_detail_box.on("click", '.area_price_add_btn', function() {
        common_form_reset();
        gotpl(area_price_tpl).render([],function(html){
            area_price_view.html(html)
            area_price_form_box.modal('show');
        })
    });
    //修改-地区价格品牌
    material_detail_box.on("click", '.area_price_edit_btn', function() {
        common_form_reset();
        var dataId = $(this).attr('dataId');
        area_price_view.find('[name="cid"]').val(dataId); // 详情ID赋值(多个)
        //远程请求
        $.ajax({
            url     : material_lists_admin_api.detail_api,
            type    : "GET",
            dataType: "json",
            data    : { id: dataId },
            success : function(data){
                if( data.status>0 ){
                    var data = data.data;
                    //基础表格
                    gotpl(area_price_tpl).render(data,function(html){
                        area_price_view.html(html)
                        area_price_form_box.modal('show');
                    })
                } else {
                    um_tip(data.message,"1500","text-danger");
                }
            }
        });
    });
    area_price_form_box.on("click", '#area_price_form_submit', function() {
        um_data_submit({
            url: material_lists_admin_api.form_add_api,
            form: area_price_form_box.find('form'),
            datagridDom:area_price_list_box,
            close_modal:area_price_form_box,
            dataSource: dataSourceTabObj['tab1']
        });
    });
    //工具条-批量删除
    material_lists_admin.on('click', '.tool_del_btn', function(){
        common_form_reset();
        var data_arr = material_lists_admin_datagrid_obj.getCheckItems().filter(function(e){return e});
        if (data_arr.length > 0) {
            var data_id = [];
            for (var i = 0; i < data_arr.length; i++) {
                data_id.push(data_arr[i].id);
            }
            material_tool_delete_box.find('[name="ids"]').val( data_id.join(",") );
            material_tool_delete_box.modal('show');
        } else {
            um_tip("至少选择一条数据", "1000", "text-danger");
        }
    });
    //批量删除提交
    material_tool_delete_box.on("click", '.tool_delete_submit', function() {
        um_data_submit({
            url: material_lists_admin_api.tool_delete_api,
            form: material_tool_delete_box.find('form'),
            datagridDom:material_lists_admin.find('.datagrid'),
            dataSource: material_lists_admin_dataSource,
        });
    });
    //单条删除
    var delType = '';
    $(document).on('click', '.line_delete_btn,.area_price_delete_btn', function(){
        common_form_reset();
        delType = $(this).data('deltype');
        material_line_delete_box.find('[name="id"]').val($(this).attr('dataId'));
        material_line_delete_box.modal('show');
    });
    //list单条删除提交/修改list单条删除
    material_line_delete_box.on("click", '.line_delete_submit', function() {
        let datagridDom=area_price_list_box,
            dataSource=dataSourceTabObj['tab1'];
        if(delType=='list'){
            datagridDom = material_lists_admin.find('.datagrid');
            dataSource = material_lists_admin_dataSource;
        }
        um_data_submit({
            url: material_lists_admin_api.tool_delete_api,
            form: material_line_delete_box.find('form'),
            datagridDom:datagridDom,
            close_modal:material_line_delete_box,
            dataSource: dataSource
        });
    });
}); //预加载结尾
</script>
    